<div>
  <table class="gt-timers-table d-inline-block"
         ng-hide="showTreeView"
         style="border-spacing: 0;">
    <thead>
    <tr>
      <td class="gt-breakdown-header gt-bold" style="text-align: left;">{{heading}}</td>
      <td class="gt-breakdown-header" style="font-weight: 600;">total&nbsp;(ms)</td>
      <td class="gt-breakdown-header" style="font-weight: 600;">count</td>
    </tr>
    </thead>
    <tbody>
    <tr class="align-top"
        ng-repeat="flattenedTimer in flattenedTimers | filter:{show: true}">
      <td style="text-align: left;">
        <div class="gt-indent2">
          <div class="gt-break-word gt-second-line-indent">{{flattenedTimer.name}}</div>
        </div>
      </td>
      <td>{{flattenedTimer.totalNanos / (1000000 * transactionCount) | gtMillis}}</td>
      <td>{{flattenedTimer.count / transactionCount | gtCount}}</td>
    </tr>
    <tr class="align-top">
      <td colspan="3" style="text-align: left;">
        <div class="gt-indent2">
          <div style="margin-left: -6px;">
            <span tabindex="-1"></span>
            <button class="gt-flat-btn gt-link-color"
                    ng-click="clickShowMore()"
                    ng-if="ftShowMore">
              show more
            </button>
            <span ng-if="ftShowMoreAndLess">/</span>
            <button class="gt-flat-btn gt-link-color"
                    ng-click="clickShowLessFT()"
                    ng-if="showLess">
              show less
            </button>
            <span ng-if="ftShowMore">
            /
            <button class="gt-flat-btn gt-link-color"
                    ng-click="clickShowAll()"
                    ng-if="ftShowMore">
              show all
            </button>
            </span>
          </div>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
  <button class="gt-indent1 gt-flat-btn gt-flat-btn-big gt-link-color"
          ng-hide="showTreeView"
          ng-click="showTreeView = true"
          style="vertical-align: top; margin-top: -1px;">
    switch to tree view
  </button>
  <table class="gt-timers-table d-inline-block"
         ng-if="showTreeView"
         style="border-spacing: 0;">
    <thead>
    <tr>
      <td class="gt-breakdown-header gt-bold" style="text-align: left;">{{heading}}</td>
      <td class="gt-breakdown-header" style="font-weight: 600;">total&nbsp;(ms)</td>
      <td class="gt-breakdown-header" style="font-weight: 600;">count</td>
    </tr>
    </thead>
    <tbody>
    <tr class="align-top"
        ng-repeat="treeTimer in treeTimers | filter:{show: true}">
      <td style="text-align: left;">
        <div class="gt-indent2">
          <div class="gt-break-word gt-second-line-indent" ng-style="{'margin-left': treeTimer.nestingIndent + 'px'}">
            {{treeTimer.name}}{{treeTimer.extended ? ' (extended)' : ''}}
          </div>
        </div>
      </td>
      <td>{{treeTimer.totalNanos / (1000000 * transactionCount) | gtMillis}}</td>
      <td>{{treeTimer.count / transactionCount | gtCount}}</td>
    </tr>
    <tr class="align-top">
      <td colspan="3" style="text-align: left;">
        <div class="gt-indent2">
          <div style="margin-left: -6px;">
            <span tabindex="-1"></span>
            <button class="gt-flat-btn gt-link-color"
                    ng-click="clickShowMore()"
                    ng-if="ttShowMore">
              show more
            </button>
            <span ng-if="ttShowMoreAndLess">/</span>
            <button class="gt-flat-btn gt-link-color"
                    ng-click="clickShowLessTT()"
                    ng-if="showLess">
              show less
            </button>
            <span ng-if="ttShowMore">
            /
            <button class="gt-flat-btn gt-link-color"
                    ng-click="clickShowAll()"
                    ng-if="ttShowMore">
              show all
            </button>
            </span>
          </div>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
  <!-- need to use $parent since ng-if creates a child scope -->
  <button class="gt-indent1 gt-flat-btn gt-flat-btn-big gt-link-color"
          ng-if="showTreeView"
          ng-click="$parent.showTreeView = false"
          style="vertical-align: top; margin-top: -1px;">
    switch to flattened view
  </button>
</div>
